<template>
  <div id="binh" :class="className" :style="{height:height,width:width}" />

</template>

<script>
  import echarts from 'echarts'
  require('echarts/theme/macarons') // echarts theme
  export default {
    // mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart',

      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '250px'
      },
      bingzhuang:{
        type: Array,
      },

    },

    data() {
      return {
        chart: null,
        nameArr:[
          {value: 335, name: '直接访问'},
          {value: 310, name: '邮件营销'},
          {value: 234, name: '联盟广告'},
          {value: 135, name: '视频广告'},
          {value: 1548, name: '搜索引擎'}
        ],
        option: {}
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })

    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    watch:{
      bingzhuang(curVal,oldVal){

        if(curVal){

          this.initChart()
        }
      },
    },
    created() {


    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')

        console.log('bingzhuang',this.bingzhuang)
        var arr=[]
        for (var i=0;i<this.bingzhuang.length;i++){
          arr.push({
            value:this.bingzhuang[i].totalSun,
            name:this.bingzhuang[i].depName
          })
        }

        this.nameArr = arr

        this.option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)',
            position: ['50%', '30%']
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            data: ['']
          },
          series: [
            {
              name: '消耗占比',
              type: 'pie',
              radius: '55%',
              center: ['50%', '35%'],
              data: this.nameArr,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
        this.chart.setOption(this.option)
      },

    }
  }
</script>
